<template>
    <div>
      <Header></Header>
        <div class="m-content">
          <el-row :gutter="6">
            <el-col :span="4" v-for="category in categories" :key="category.id">
              <el-card shadow="hover">
                <el-link @click="handleClick(category.name)">{{category.memo}}</el-link>
              </el-card>
            </el-col>
          </el-row>
        </div>
      <Footer></Footer>
    </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
export default {
  name: 'Category',
  components: { Footer, Header },
  data () {
    return {
      categories: []
    }
  },
  methods: {
    getCategories () {
      this.$axios.get('/categories').then(response => {
        // console.log(response.data.data)
        this.categories = response.data.data
      })
    },
    handleClick (categoryName) {
      this.$router.push('/category/' + categoryName)
    }
  },
  mounted () {
    console.log('ca m')
    this.getCategories()
  }
}
</script>

<style scoped>
.m-content {
  min-height: 800px;
  margin: 0 auto;
  max-width: 80%;
}
</style>
